<script setup lang="ts">
import {onMounted, ref} from "vue";
import { Question, Tag} from "../../types/mytypes";
import {QuestionRequest, TagRequest} from "../../request/MyRequset";
import QuestionList from "../Question/QuestionList.vue";


const emit = defineEmits(['err','use','cancel'])

let allTag = ref<Tag[]>([])
let selectTag = ref('')
let randomQuestion = ref<Question[]>([])
let count = ref(0)
let showList = ref(false)

onMounted(async ()=>{
  let allTagRes = await TagRequest.getAll();
  if(allTagRes.suc){
    allTag.value = allTagRes.data
    selectTag.value = allTag.value[0].name
  }else{
    emit('err',allTagRes.message)
  }
})

const getRandomQuestion = async ()=>{
  showList.value = false
  let randomRes = await QuestionRequest.randomGetByTag(count.value,selectTag.value)
  if(randomRes.suc){
    randomQuestion.value = randomRes.data;
    showList.value = true
  }else{
    emit("err",randomRes.message)
  }
}

</script>

<template>
<el-form :inline="true">
  <el-form-item label="选择题目标签">
    <el-select filterable v-model="selectTag">
      <el-option v-for="item in allTag" :value="item.name"></el-option>
    </el-select>
  </el-form-item>
  <el-form-item label="请输入数量" >
      <el-input-number :max="100" :min="1" v-model="count"></el-input-number>
  </el-form-item>
  <el-form-item>
    <el-button @click="getRandomQuestion" type="primary">抽取</el-button>
  </el-form-item>
  <el-scrollbar max-height="13em">
    <QuestionList v-if="showList" :show-question="randomQuestion"></QuestionList>
  </el-scrollbar>
  <el-form-item style="margin-top: 1em">
    <el-button @click="emit('use',randomQuestion)" type="primary" v-if="randomQuestion.length > 0">使用</el-button>
    <el-button @click="emit('cancel')">取消</el-button>
  </el-form-item>
</el-form>

</template>

<style lang="scss" scoped>

</style>